<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>处方划价</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
    <style>
        .nam{
            width: 80px;
            font-size:16px;
            color: #737383;
            padding-left: 20px;
        }
        .sbb{
            width: 150px;
            text-align: center;
        }
        #repi{
            margin-top:60px;
            margin-left: 60px;
            height: 400px;
            width: 580px;
        }
        #alldrug{
            margin-top:-410px;
            margin-left: 680px;
            height: 400px;
            width: 580px;
        }
        #selinp{
            width: 200px;
            height: 40px;
            border:solid #CCCCCC 1px;
            border-radius: 2px;
        }
        #selbut{
            width: 100px;
            height: 40px;
            background-color:rgb(1,150,136);
            color: white;
            border: 0px;
            border-radius: 2px;
            cursor: pointer;
        }
        #pay{
            text-align: center;
            font-size: 16px;
            color: #737383;
            margin-top: 10px;
        }
        .inp{
            border: #CCCCCC solid 1px;
            height: 35px;
            border-radius: 3px;
            width: 200px;
        }
        #tibu{
            width: 100px;
            background-color:rgb(1,150,136);
            border: 0px;
            border-radius: 3px;
            margin-right: 20px;
            height: 30px;
            font-size: 14px;
            color: white;
            cursor: pointer;
        }
        #qubu{
            width: 100px;
            background-color:#CCCCCC;
            border: 0px;
            border-radius: 3px;
            margin-left: 20px;
            height: 30px;
            font-size: 14px;
            cursor: pointer;
        }
        #selinp1{
            width: 200px;
            height: 40px;
            border:solid #CCCCCC 1px;
            border-radius: 2px;
            margin-left: 20px;
        }
        #selbut1{
            width: 100px;
            height: 40px;
            background-color:rgb(1,150,136);
            color: white;
            border: 0px;
            border-radius: 2px;
        }
    </style>
</head>

<body>
<!--头部显示信息开始-->
<div>
    <form class="layui-form" method="post" id="dataFrm">
        <table style="margin-top: 20px;margin-left: 30px;">
            <tr>
                <td class="nam">姓名:</td>
                <td class="valu">
                    <input id="reid" type="hidden" class="layui-input" readonly name="reportId"/>
                    <input id="rename" class="layui-input" type="text" readonly name="reportName"/> </td>
                <td class="nam">身份证号:</td>
                <td class="valu"><input id="carid" class="layui-input" type="text" readonly name="carid"/> </td>
                <td class="nam">性别:</td>
                <td class="valu"><input id="resex" class="layui-input" type="text" readonly/> </td>
                <td class="nam">年龄:</td>
                <td class="valu"><input id="age" class="layui-input" type="text" readonly/> </td>
                <td rowspan="3" class="sbb">
                    <input id="sbut" type="button" class="layui-btn layui-icon-add-circle-fine" value="开始划价">
                </td>
            </tr>
            <tr style="height: 20px"></tr>
            <tr>
                <td class="nam">科室:</td>
                <td class="valu"><input class="layui-input" id="rede" type="text" readonly/> </td>
                <td class="nam">医生:</td>
                <td class="valu"><input class="layui-input" id="redo" type="text" readonly/> </td>
                <td class="nam">电话:</td>
                <td class="valu"><input class="layui-input"  id="phone" type="text" readonly/> </td>
                <td class="nam">挂号费:</td>
                <td class="valu"><input class="layui-input"  id="price" type="text" readonly/> </td>
        </table>
    </form>
</div>
<!--头部显示信息结束-->

<!--病号信息弹出层开始-->
<div style="display: none;padding-top: 20px" id="peopleimgeDiv" >
    <div id="adddrug1">
        <input type="text" placeholder="请输入你要查询的信息" id="selinp1" autocomplete="off" >
        <input type="button" id="selbut1" value="查询"/>
    </div>
    <table class="layui-hide" id="userTable" lay-filter="userTable"></table>
    <div  id="userBar" style="display: none;">
        <a class="layui-btn layui-btn-xs" lay-event="edit">选择</a>
    </div>
</div>
<!--病号信息弹出层结束-->
<!--处方页面开始-->
<div id="repi">
    <table class="layui-hide" id="repiid" lay-filter="repiid"></table>
    <div  id="delrepi" style="display: none;">
        <a class="layui-btn layui-btn-xs" lay-event="delrepi">删除</a>
    </div>
</div>
<!--处方页面结束-->
<!--药品详情页面开始-->
<div id="alldrug">
    <div style="display: none" id="adddrug">
        <input type="text" placeholder="请输入项目名字" id="selinp" autocomplete="off" >
        <input type="button"  id="selbut" value="查询"/>
    </div>
    <table class="layui-hide" id="drugtable" lay-filter="drugtable"></table>
    <div  id="choose" style="display: none;">
        <a class="layui-btn layui-btn-xs" lay-event="druedit">选择</a>
    </div>
</div>
<!--药品详情页面结束-->
<!--添加药品数量开始-->
<div id="drugnum" style="text-align: center;display: none">
    <input type="number" id="num" style="height: 25px;width:200px;margin-top: 15px;" placeholder="请输入数量" value="1" readonly autocomplete="off">
    <input type="hidden" id="kunum"><!--药品库存数量-->
    <input type="hidden" id="mename"><!--药品名字-->
    <input type="hidden" id="sellingPrice"><!--药品单价-->
    <input type="hidden" id="ostate"><!--项目状态-->
    <span id="uni"></span><br/><br/><br/><br/>
    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" id="addru">提交</button>
    <button type="button" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh layui-icon-delete" id="clo" >取消</button>
</div>
<!--添加药品数量结束-->
</body>
<script th:src="@{/layui/layui.js}"></script>

<script type="text/javascript" th:inline="none">
    var tableIns;
    var hua;
    var xinagmu;
    var people;
    layui.use([ 'jquery', 'layer', 'form', 'table' ], function() {

        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        //查询患者信息表
        var mainIndex;
        $("#sbut").click(function(){
            mainIndex=layer.open({
                type:1,
                title:'选择病人',
                content:$("#peopleimgeDiv"),
                area:['1300px','500px'],
                success:function(index){
                    people=table.render({
                        elem: '#userTable'   //渲染的目标对象
                        ,url:'../caocc/selpreson' //数据接口
                        ,title: '用户数据表'//数据导出来的标题
                        ,cellMinWidth:200 //设置列的最小默认宽度
                        /*,parseData:function(res){
                             return{
                                 "code":0,//如果不用分页后台没有用分页设置code:0的话需要加上这句话
                                 data:res//要不然会报会报返回的数据类型不符合规范
                             }
                         }*/
                        ,page: 1  //是否启用分页, limits: [10, 20, 30]
                        ,limits: [5, 10, 15]
                        ,limit: 5//默认采用3
                        ,cols: [[   //列表数据
                            {field:'reportId', title:'单据号',align:'center',width:"8%"}
                            ,{field:'reportName', title:'姓名',align:'center',width:"8%"}
                            ,{field:'phone', title:'电话',align:'center',width:"8%"}
                            ,{field:'carid', title:'身份证号',align:'center',width:"8%"}
                            ,{field:'sex', title:'性别',align:'center',width:"8%"}
                            ,{field:'age', title:'年龄',align:'center',width:"8%"}
                            ,{field:'department', title:'科室',align:'center',width:"8%"}
                            ,{field:'doctorName', title:'医生',align:'center',width:"8%"}
                            ,{field:'type', title:'挂号类别',align:'center',width:"8%"}
                            ,{field:'time', title:'挂号时间',align:'center',width:"8%"}
                            ,{field:'price', title:'挂号费',align:'center',width:"8%"}
                            ,{fixed: 'right', title:'操作', toolbar: '#userBar',align:'center',width:'8%'}
                        ]]
                    })
                    xinagmu=table.render({
                        elem: '#drugtable'   //渲染的目标对象
                        ,url:'../caoout/selout' //数据接口
                        ,title: '药品信息'
                        ,cellMinWidth:200 //设置列的最小默认宽度
                        /*,parseData:function(res){
                            return{
                                "code":0,//如果不用分页后台没有用分页设置code:0的话需要加上这句话
                                data:res//要不然会报会报返回的数据类型不符合规范
                            }
                        }*/
                        ,page: 1  //是否启用分页, limits: [10, 20, 30]
                        ,limits: [5, 10, 15]
                        ,limit: 5//默认采用3
                        ,cols: [[   //列表    数据
                            {field:'projectName', title:'药品名称',align:'center',width:"25%"}
                            ,{field:'unitName', title:'单位',align:'center',width:"25%"}
                            ,{field:'price', title:'单价',align:'center',width:"25%"}
                            ,{fixed: 'right', title:'操作', toolbar: '#userBar',align:'center',width:'25%'}
                        ]]

                    })

                }

            });
            $("#adddrug").fadeIn(1000);
        });
        //监听患者行工具事件
        table.on('tool(userTable)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if(layEvent === 'edit'){ //编辑
                $("#reid").val(data.reportId)
                $("#rename").val(data.reportName)
                $("#resex").val(data.sex)
                $("#age").val(data.age)
                $("#rede").val(data.department);
                $("#redo").val(data.doctorName);
                $("#carid").val(data.carid);
                $("#phone").val(data.phone);
                $("#price").val(data.price);
                var perid=data.reportId;
                //查询该用户的处方
                layer.close(mainIndex)
                wareid=data.value;//获取选中的药房的id
                hua=table.render({
                    elem: '#repiid'   //渲染的目标对象
                    ,url:'../caocc/selximu?perid='+perid //数据接口
                    ,title: '患者处方'
                    ,cellMinWidth:200 //设置列的最小默认宽度
                    ,page: 1  //是否启用分页, limits: [10, 20, 30]
                    ,limits: [5, 10, 15]
                    ,limit: 5//默认采用3
                    ,cols: [[   //列表    数据
                        {field:'durgname', title:'项目名称',align:'center',width:"20%"}
                        ,{field:'durgnum', title:'数量',align:'center',width:"15%"}
                        ,{field:'repiceprice', title:'单价',align:'center',width:"15%"}
                        ,{field:'repicetotal', title:'小计',align:'center',width:"15%"}
                        ,{field:'ostate', title:'受否检查',align:'center',width:"20%",templet:function(w){
                                return w.ostate==0?'<font color="blue">非检查</font>':'<font color="red">需检查</font>'
                            }}
                        ,{fixed: 'right', title:'操作',align:'center',width:'15%',templet:function(d){
                                if(d.state==0){
                                    return '药品'
                                }else if(d.mstate==1){
                                    return '<font color="blue">已缴费</font>'
                                }else {
                                    return '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delrepi">删除</a>'
                                }
                            }}
                    ]]
                })
            }
        });
        //监听药品表行工具事件
        table.on('tool(drugtable)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if(layEvent === 'edit'){ //操作
                openUpdate(data);
            }
        });
        //打开药品数量页面
        function openUpdate(data){
            var reid=$("#reid").val();
            if(reid==''){
                layer.msg("请选择患者");
            }else {
                $.post("../caocc/selbing", {"reid": reid}, function (obj) {
                    if (obj == '') {
                        layer.msg("请先填写病因");
                    } else {
                        mainIndex = layer.open({
                            type: 1,
                            title: '选择数量',
                            content: $("#drugnum"),
                            area: ['300px', '200px']
                        });
                        $("#uni").text(data.unitName);//单位
                        $("#mename").val(data.projectName);//药品名字
                        $("#sellingPrice").val(data.price);//药品单价
                        $("#ostate").val(data.ostate);//项目状态证明要不要检查
                    }
                })
            }
        }
        //点击添加药品数量的提交按钮
        $("#addru").click(function(){
            //获取文本框的数量
            var num=$("#num").val();
            //获取用户挂号id
            var reid=$("#reid").val();
            //获取药品的名字
            var mename=$("#mename").val();
            //获取药品单价
            var sellingPrice=$("#sellingPrice").val();
            var ostate=$("#ostate").val();
            //小计
            var price=num*sellingPrice
            //判断添加数量的文本框是否有值或者为0如果成立提示
            if(num==""||num==0||num<0){
                layer.msg("请输入正确的项目的数量");
            }else if(reid==""){//判断是否选中用户如果没有选中用户着提示
                layer.msg("请选择患者");
            }else{
                $.post("../caoout/addchuo",{"reportId":reid,"durgname":mename,"durgnum":num,"repiceprice":sellingPrice,"repicetotal":price,"drugstorenum":num,"ostate":ostate},function(obj){
                    layer.msg("添加成功");
                    layer.close(mainIndex);
                    hua.reload();
                })
            }
        })
        //点击添加药品的取消按钮
        $("#clo").click(function(){
            //关闭弹出的页面
            layer.close(mainIndex)
            $("#num").val("");
        })
        //监听行工具事件
        table.on('tool(repiid)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if(layEvent === 'delrepi'){ //删除
                layer.confirm('确定删除【'+data.durgname+'】这个项目吗', function(index){
                    //向服务端发送删除指令
                    $.post("delo",{cashier:data.cashier},function(res){
                        layer.msg(res);
                        //刷新数据 表格
                        hua.reload();
                    })
                });
            }
        });
        //用户模糊查询
        $(document).on('click',"#selbut1",function(){
            var durgname=$("#selinp1").val()
            people.reload({
                url:"../caocc/mohu?durgname="+durgname
            })
        });
        //项目模糊查询
        $(document).on('click',"#selbut",function(){
            var projectName=$("#selinp").val()
            xinagmu.reload({
                url:"../caoout/selout?projectName="+projectName
            })
        });
    })

</script>
</html>